<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>示例</title>
  <link href="src/Cesium/Widgets/widgets.css" rel="stylesheet" />
  <link href="src/layui-v2.4.5/css/layui.css" rel="stylesheet" />
  <script src="src/Cesium/Cesium.js"></script>
  <script src="src/layui-v2.4.5/layui.all.js"></script>
  <script src="src/jquery/jquery.min.js"></script>
  <script src="src/cesium-measure.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    #viewer-container {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="viewer-container"></div>
  <div class="layui-card">
    <div class="layui-card-header" style="color:white">量测面板</div>
    <div class="layui-card-body">
      <div>量测:
        <button type="button" class="layui-btn layui-btn-sm">不贴地</button>
        <button type="button" class="layui-btn layui-btn-sm">空间距离</button>
        <button type="button" class="layui-btn layui-btn-sm">空间面积</button>
        <button type="button" class="layui-btn layui-btn-sm">三角量测</button>
        <button type="button" class="layui-btn layui-btn-sm">加载模型</button>
      </div>
      <br>
      <div>清除:
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">清除量测</button>
      </div>
    </div>
  </div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYTQ2ZjdjNS1jM2E0LTQ1M2EtOWM0My1mODMzNzY3YjYzY2YiLCJpZCI6MjkzMjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTE5NDIzNjB9.RzKlVTVDTQ9r7cqCo-PDydgUh8Frgw0Erul_BVxiS9c';
    let viewer = new Cesium.Viewer("viewer-container", {
      infoBox: false,
      shouldAnimate: true,
      vrButton: false,
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      baseLayerPicker: true,
      navigationHelpButton: false,
      animation: false,
      timeline: false,
      fullscreenButton: false,
    });

    let measure = new Cesium.Measure(viewer)
    let clampToGround = true

    var tilesets = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
      url: 'http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json'
    }));

    function loadModel() {

      viewer.flyTo(viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(116.32878855240442, 39.95208707482746, 0.0),
        model: { uri: './src/qiche.gltf' }
      }))
    }
    tilesets.readyPromise.then(function (tileset) {

      viewer.flyTo(tileset)

      $('.layui-card-body button').on('click', function () {
        let text = $(this).text()
        if (text) {
          switch (text) {
            case '不贴地': clampToGround = false; break;
            case '空间距离': measure.drawLineMeasureGraphics({ clampToGround: clampToGround, callback: () => { } }); break;
            case '空间面积': measure.drawAreaMeasureGraphics({ clampToGround: clampToGround, callback: () => { } }); break;
            case '三角量测': measure.drawTrianglesMeasureGraphics({ callback: () => { } }); break;
            case '清除量测': measure._drawLayer.entities.removeAll(); break;
            case '加载模型': loadModel(); break;
          }
        }
      })
    })
  </script>
  <style>
    .layui-card {
      position: absolute;
      top: 10px;
      left: 5px;
      background-color: #ffffff6b;
      box-shadow: inset 1px 2px 2px 0 #f2f6fc;
      color: white
    }
  </style>
</body>

</html>